<?php $this->headLink()
->appendStylesheet($this->js('css/jquery.alerts.css'))
->appendStylesheet($this->js('css/tablesorter/default.css'))
->appendStylesheet($this->js('plugins/css/jquery.autocomplete.css'));
$this->headStyle()->captureStart()?>
.ui-tabs-nav{font-size:12px}
<?php $this->headStyle()->captureEnd()?>
<?php $this->headScript()
->appendFile($this->js('jquery-ui/ui/jquery.ui.tabs.js'))
->appendFile($this->js('plugins/jquery.form.js'))
->appendFile($this->js('plugins/jquery.blockUI.js'))
->appendFile($this->js('plugins/jquery.alerts.js'))
->appendFile($this->js('plugins/jquery.DOMWindow.js'))
->appendFile($this->js('plugins/jquery.printf.js'))
->appendFile($this->js('plugins/jquery.tablesorter.js'))
->appendFile($this->js('plugins/jquery.autocomplete.min.js'))
->captureStart()?>

$(document).ready(function(){
 $('#container').tabs({ remote: true  });

});
<?php $this->headScript()->captureEnd()?>
<?php $this->headStyle()->captureStart()?>
.option_boy{color:blue;}
.option_girl{color:red;}
<?php $this->headStyle()->captureEnd();?>

<div id="container">
            <ul>
            <?php foreach($this->menuArr as $id=>$val):?>
                <li><a href="<?php echo $this->route($id)?>"><span><?php echo $val?></span></a></li>
            <?php endforeach?>
            </ul>
        </div>
